<template>
  <div class="card-list">
    
    <div v-for="(item, index) in resData" :key="index" class="card-container">
      <div  v-show="!item.otherSide" class="card-region card" :style="`color:${item.text_color};
      background-color:${item.cover.startsWith('#')?item.cover:''};background-image:${item.cover.startsWith('http')?'url('+item.cover+')':'none'}`">
        <div class="item-top">
          <span>{{item.rank_name}}</span>
        </div>
        <div class="item-middle">
          <img class="ava" :src="item.avatar" alt="会员卡" :style="`display:${item.is_show_logo==='1'?item.avatar:'none'}`" />
          <!-- <div :style="`display:${item.is_show_shopname==='1'?item.title:'none'}`">
            <p>{{item.title}}</p> -->

          <div class="item-middle-info" :style="`display:${item.is_show_shopname==='1'?item.title:'none'}`">
            <p class="card-name">{{item.title}}</p>
            <div class="user-id">用户ID：{{pid}}</div>
          </div>
        </div>
        <div class="item-bottom">
          <span @click="onViewPrivilegeClick(item,index)">查看会员特权</span>
          <span @click="onShowPopClick(item)">{{item.allow_buy==1?'立即购买':'立即领取'}}</span>
        </div>
      </div>
      <!--会员卡背面-->
      <div class="card-region card2" v-show="item.otherSide">
        <div class="myteq">
          <span>我的特权</span>
          <span class="backBtn" @click="onClosePrivilegeClick(item, index)">
            <img src="https://img.wifenxiao.com/h5-wfx/images/user/card/back.png" alt="">
            返回
          </span>
        </div>
        <div class="membership">
          <p class="item-name discount" v-show="item.discount">
            <span class="discount-num">{{item.discount}}</span>
            <span class="txt">折</span>
          </p>
          <p class="usr_card">会员卡</p>
        </div>
      </div>
    </div>

    <div class="PopLayer">
    </div>
    <div class="PopBox">
      <h1>确认购买会员卡</h1>
      <div class="title">
        <p><span class="left-label">价格</span>：<em>{{mSymbol.name}}</em><strong>{{curItem.card_amount}}</strong></p>
        <p><span class="left-label">有效期</span>：<em v-html="formatLimitMsg(curItem)"></em></p>
      </div>
      <div class="middle-ye" v-if="pay.order.balance >0 && Number(pay.order.balance) >= Number(curItem.card_amount)">
        <van-checkbox class="item-title" checked-color="#DEAE6F" v-model="money_type" shape="square" icon-size="14px">
          使用{{ pay.order.balance_alias || '余额' }}
          <i>({{pay.order.balance_alias || '余额'}}：<span>{{ mSymbol.name }}<b>{{ pay.order.balance }}</b></span>)</i>
        </van-checkbox>
      </div>
      <div class="middle-zfb" @click="onPaySelected(1)" v-show="!money_type && pay.order.is_wx_pay == 1">
        <div>
          <img src="https://img.wifenxiao.com/h5-wfx/images/card-list/icon-wx.png" alt="" />
          <span>微信</span>
        </div>
        <div>
          <input type="radio" name="wx" value="" :checked="pay.type===1" /><img :class="[pay.type===1?'active':'']"/>
        </div>
      </div>
      <!-- <hr />
      <div class="middle-zfb" @click="onPaySelected(2)">
        <div>
          <img src="https://img.wifenxiao.com/h5-wfx/images/card-list/icon-zfb.png" alt="" />
          <span>支付宝</span>
        </div>
        <div>
          <input type="radio" name="zfb" value="" :checked="pay.type===2" /><img/>
        </div>
      </div>
      <hr />
      <div class="middle-zfb" @click="onPaySelected(3)">
        <div>
          <img src="https://img.wifenxiao.com/h5-wfx/images/card-list/icon-ye.png" alt="" />
          <span>余额支付</span>
        </div>
        <div>
          <input type="radio" name="wx" value="" :checked="pay.type===3" /><img/>
        </div>
      </div> -->

      <div class="bottom-pay" @click="onPayClick">
        立即支付
      </div>
      <div class="bottom-cancel" @click="onCancelPopClick">
        取消
      </div>

    </div>
  </div>
</template>

<script>
import { reqGetCards, reqPostCardOrder, reqPostCardOrderPay } from '@/api/user/member/memberApi'
import { openPage } from '@/utils/utils'
import { mapGetters } from 'vuex'
import small from '@/smallapp/small'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      resData: [],
      curItem: {},
      pay: {
        type: 0,
        order: {}
      },
      pid:'',
      money_type: false
    }
  },
  created() {
      this.pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
    this.init()
  },
  destroyed() {
    document.documentElement.style.overflow = 'visible'
  },
  watch: {
    'money_type'(val) {
      if (val) {
        this.pay.type = 0
      } else {
        this.pay.type = this.pay.order.is_wx_pay
      }
    },
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      reqGetCards().then(res => {
        if (res.status === 1) {
          this.resData = res.data
          if (this.resData.length == 0) {
            this.$JumpPath(this, 'cardDetail')
          }
        } else {
          this.$Error(res.msg)
        }

        this.$nextTick(_ => {
          this.$loadingWrap.close()
        })
      }).catch(_ => {})
    },
    onViewPrivilegeClick(item, index) {
      item.otherSide = true
      this.$set(this.resData, index, item)
    },
    onClosePrivilegeClick(item, index) {
      item.otherSide = false
      this.$set(this.resData, index, item)
    },
    onShowPopClick(item) {
      if (item.allow_buy == 0) {
        this.$JumpPath(this, 'cardDetail')
        return
      }
      this.curItem = item
      this.$loadingWrap.show()
      reqPostCardOrder({
        'member_card_id': item.member_card_id
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.pay.order = res.data
          if (this.pay.order.balance > 0 && (Number(this.pay.order.balance) >= Number(this.curItem.card_amount))) {
            this.money_type = true
          } else {
            this.money_type = false
            this.pay.type = 1
          }
          document.querySelector('.PopLayer').style.display = 'block'
          document.querySelector('.PopBox').style.display = 'block'
          document.documentElement.style.overflow = 'hidden'
        } else {
          this.$Error(res.msg)
        }
      }).catch(_ => {})
    },
    onPaySelected(type) {
      this.pay.type = type
    },
    onPayClick() {
      if (this.pay.type == 0 && !this.money_type) {
        this.$Error('请选择支付方式')
        return false
      }
      this.$loadingWrap.show()
      reqPostCardOrderPay({
        'card_order_id': this.pay.order.card_order_id,
        "balance_pay": this.money_type ? 1 : undefined
      }).then(res => {
        this.$loadingWrap.close()
        this.onCancelPopClick()
        if (this.money_type == 1) {
          if (res.status === 1) {
            this.$Error('购买成功')
            this.$JumpPath(this, 'card-record', {card_order_id: this.pay.order.card_order_id, balance_pay: this.money_type})
          } else {
            this.$Error(res.msg)
          }
        } else {
          // 微信支付
          if (res.data.jsApiParameters) {
            const url=res.data.redirect_url
            const payData = JSON.parse(res.data.jsApiParameters)
            wx.requestPayment({
              timeStamp: payData.timeStamp,
              nonceStr: payData.nonceStr, //
              package: payData.package, //
              signType: payData.signType, //微信签名方式
              paySign: payData.paySign, //微信签名
              success: (res) => {
                // console.log(res)
                openPage(url)
              },
              fail: (failmsg) => {
                // console.log(failmsg)
              }
            })
          }
        }
        
      })
    },
    onCancelPopClick() {
      document.querySelector('.PopLayer').style.display = 'none'
      document.querySelector('.PopBox').style.display = 'none'
      document.documentElement.style.overflow = 'visible'
    },
    formatLimitMsg(item) {
      let msg = ''
      switch (item.limit_type) {
        case '1':
          msg = item.limit_msg
          break
        case '2':
          msg = item.limit_day + '<span class="unit" style="font-size:14px;">天</span>'
          break
        case '3':
          msg = item.limit_msg.split('/')[1].replace(/\ +/g, '')
          break
        default:
          break
      }
      return msg
    }
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
  .card-list {
    .card-container {
    }
    .card-region {
      position: relative;
      width: 700px;
      height: 350px;
      margin: 25px auto 0;
      color: #fff;
      border-radius: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-color: white;
      background-image: url('https://img.wifenxiao.com/h5-wfx/images/card-list/def_bg.png');
      animation: rotateanimation 1s;
      @keyframes rotateanimation {
        0% {
          transform: rotate3d(0, 1, 0, 90deg);
        }
        100% {
          transform: rotate3d(0, 1, 0, 0deg);
        }
      }
    }
    .card {
      .item-top {
        position: absolute;
        top: 0;
        right: 0;
        line-height: 50px;
        font-size: 24px;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.3);
        padding: 0 20px;
        border-radius: 0 16px 0 16px;
      }
      .item-middle {
        display:flex;
        position: absolute;
        top: 40px;
        width: 100%;
        img.ava {
          width: 116px;
          height: 116px;
          margin-left: 40px;
          vertical-align: middle;
          border-radius: 50%;
          display: inline-block;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .item-middle-info {
          display:flex;
          flex-direction: column;
          justify-content: center;
          flex:1;
          height:116px;
          // line-height: 116px;
          margin-left: 23px;
          .card-name {
            font-size: 36px;
            font-weight: bold;
          }
          .user-id{
            margin-top:16px;
            font-size:24px;
          }
        }
      }
      .item-bottom {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 110px;
        background: rgba(255, 255, 255, 0.1);
        & > span:nth-of-type(1) {
          position: absolute;
          left: 40px;
          bottom: 40px;
          font-size: 26px;
        }
        & > span:nth-of-type(1)::after {
          content: '';
          display: inline-block;
          width: 9px;
          height: 9px;
          border-top: 1px solid;
          border-right: 1px solid;
          transform: rotate(45deg);
          margin-left: 14px;
          margin-bottom: 4px;
        }
        & > span:nth-of-type(2) {
          position: absolute;
          bottom: 28px;
          right: 30px;
          padding: 15px 24px;
          color: #262D46;
          font-size: 22px;
          background: linear-gradient(-90deg,rgba(222,173,111,1),rgba(251,227,165,1));
          box-shadow: 0px 6px 9px 0px rgba(15,18,29,0.15), 0px 2px 5px 0px rgba(255,234,201,0.3);
          border-radius: 25px;
        }
        & > span:nth-of-type(2)::after {
          content: '';
          display: inline-block;
          width: 0px;
          height: 0px;
          border-top: 8px solid transparent;
          border-left: 8px solid #262D46;
          border-bottom: 8px solid transparent;
          margin-left: 7px;
        }
      }
    }
    .card2 {
      padding: 30px;
      .myteq {
        border-bottom: 2px solid rgba(9, 10, 15, 0.2);
        font-size: 28px;
        color: #ffffff;
        padding-bottom: 30px;
        span {
          font-size: 28px;
        }
        .backBtn {
          img {
            width: 28px;
            height: 22px;
            vertical-align: 2px;
          }
          display: block;
          height: 40px;
          float: right;
        }
      }
      .membership {
        .discount {
          color: #8d7a57;
          font-size: 116px;
          padding: 20px 0 0 60px;
          font-weight: bold;
          float: left;
          height: 180px;
          .discount-num {
            font-style: inherit;
          }
          .txt {
            font-size: 44px;
            position: relative;
            top: -6px;
          }
        }
        .usr_card {
          color: #2d344d;
          font-size: 60px;
          padding-top: 68px;
          font-weight: bold;
          text-align: right;
          margin-right: 40px;
        }
      }
    }

    .PopLayer {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2000;
      background-color: #000;
      opacity: .2;
    }
    .PopBox {
      display: none;
      position: fixed;
      overflow: scroll;
      width: 600px;
      height: 740px;
      top: 0px;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      z-index: 2021;
      background-color: #FFFFFF;
      border-radius:20px;

      & > h1 {
        color: #333;
        font-size: 32px;
        margin-top: 40px;
        margin-bottom: 50px;
        text-align: center;
        font-weight: bold;
      }
      & > div.title {
        // text-align: center;
        font-size: 28px;
        color: #666;
        margin-bottom: 30px;
        .left-label{
          display: inline-block;
          width: 260px;
          padding-left:170px;
          text-align-last: justify;
        }
        p:first-child {
          margin-bottom: 30px;
          em {
            color: #F21228;
            font-weight: bold;
            display: inline;
          }
          strong {
            display: inline;
            color: #F21228;
            font-size: 50px;
            font-weight: bold;
          }
        }
        p:last-child {
          em {
            display: inline;
            color: #DFAE70;
            font-size: 40px;
          }
        }
      }
      & .middle-zfb {
        overflow: hidden;
        margin: 0 30px;
        & > div:first-child {
          float: left;
          font-size: 28px;
          color: #333;
          img {
            width: 57px;
            height: 57px;
            vertical-align: middle;
            margin-right: 15px;
          }
        }
        & > div:last-child {
          float: right;
          height: 57px;
          width: 36px;
          position: relative;
          input {
            display: none;
          }
          img {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 36px;
            height: 36px;
            content: url('https://img.wifenxiao.com/h5-wfx/images/card-list/icon-normal.png');
            &.active{
              content: url('https://img.wifenxiao.com/h5-wfx/images/card-list/icon-checked.png');
            }
          }
          // input[type="radio"] + img {
          //   width: 36px;
          //   height: 36px;
          //   content: url('https://img.wifenxiao.com/h5-wfx/images/card-list/icon-normal.png');
          // }
          // input[type="radio"]:checked + img {
          //   width: 36px;
          //   height: 36px;
          //   content: url('https://img.wifenxiao.com/h5-wfx/images/card-list/icon-checked.png');
          // }
        }
      }
      hr {
        border-top-width: 1px;
        border-color: rgba(239,233,226,.2);
        margin: 30px 0;
      }

      & .bottom-pay {
        margin: 40px 30px 0;
        padding: 28px 0;
        font-size: 28px;
        color: #fff;
        text-align: center;
        background: linear-gradient(-90deg,rgba(222,173,111,1),rgba(251,227,165,1));
        box-shadow: 0px 2px 5px 0px rgba(255,234,201,0.3);
        border-radius: 40px;
      }
      & .bottom-cancel {
        margin: 30px 30px 30px;
        padding: 28px 0;
        font-size: 28px;
        color: #DEAE6F;
        text-align: center;
        border: 1px solid rgba(222, 174, 111, 1);
        border-radius: 40px;
      }
    }
  }
  .middle-ye {
    padding: 20px 30px 30px 30px;
    font-size: 28px;
    span {
      color: #DEAE6F;
    }
  }
</style>